<template>
    <div class="app-container">
        <el-card shadow="always">
            <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="网络制式：" prop="networkType">
                    <el-select v-model="queryParams.networkType" placeholder="请选择网络制式" style="width: 240px">
                        <el-option v-for="dict in nhp_network_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属区县：" prop="county">
                    <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable style="width: 240px">
                        <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="GGI：" prop="cgi">
                    <el-input v-model="queryParams.cgi" placeholder="请输入CGI" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="小区名称：" prop="cellName">
                    <el-input v-model="queryParams.cellName" placeholder="请输入小区名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime">
                    <el-date-picker v-model="queryParams.createStartEnd" type="daterange" range-separator="To"
                        start-placeholder="开始时间" end-placeholder="结束时间" :size="size" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listPerceptionTable">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 10px;min-height: 500px;padding-bottom: 20px;">
            <el-row>
                <el-button type="primary" icon="Download" @click="exportData">导出</el-button>
            </el-row>
            <div id="table" style="margin-top: 20px;">
                <el-table v-loading="loading" ref="qualityTable" :data="tableData" style="width: 100%">
                    <el-table-column prop="county" label="所属区县" width="100" align="center" fixed />
                    <el-table-column prop="cgi" label="CGI" width="180" align="center" fixed />
                    <el-table-column prop="cellName" label="小区名称" width="200" align="center" fixed />
                    <el-table-column prop="createTime" label="创建日期" :formatter="dateFormatter" width="120" fixed
                        align="center" />
                    <el-table-column prop="status" label="状态" width="150" align="center" fixed>
                        <template #default="scope">
                            <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'" disable-transitions>{{
                scope.row.status
                    == 1 ? "正常" : "异常" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="complaintNum" label="投诉数量" width="150" align="center" />
                    <el-table-column prop="satisfaction" label="用户满意度" width="150" align="center" />
                    <el-table-column prop="perceptionScore" label="用户感知总分" width="150" align="center" fixed="right" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="showDetailDialog(scope.row.stationNo)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 50, 100, 200]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next" :total="total" @size-change="listPerceptionTable"
                    @current-change="listPerceptionTable" />
            </div>
        </el-card>
    </div>
</template>

<script setup name="networkPerception">

import { queryPerception4gResultList, queryPerception5gResultList } from '@/api/biz/networkPerception';

const { proxy } = getCurrentInstance();
const { nhp_county_type, nhp_network_type } = proxy.useDict("nhp_county_type", "nhp_network_type");


var currentDate = new Date();
currentDate.setDate(currentDate.getDate() + 1);

const queryParams = ref({
    networkType: "5G",
    createStartEnd: [new Date(), currentDate]
})

const tableData = ref([])
const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)

function listPerceptionTable() {
    const param = {}
    param.pageSize = pageSize.value
    param.pageNum = currentPage.value
    param.county = queryParams.value.county
    param.cgi = queryParams.value.cgi
    param.cellName = queryParams.value.cellName
    if (queryParams.value.createStartEnd && queryParams.value.createStartEnd.length > 0) {
        param.createStart = queryParams.value.createStartEnd[0].toLocaleDateString()
        param.createEnd = queryParams.value.createStartEnd[1].toLocaleDateString()
    }
    if (queryParams.value.networkType == "5G") {
        //加载5G结果
        queryPerception5gResultList(param).then(res => {
            tableData.value = res.rows;
            total.value = res.total;
        })

    } else if (queryParams.value.networkType == "4G") {
        //加载4G结果
        queryPerception4gResultList(param).then(res => {
            tableData.value = res.rows;
            total.value = res.total;
        })

    }
}

function dateFormatter(row, column, cellValue, index) {
    if (!cellValue) { return }
    // 创建一个新的 Date 对象
    var originalDate = new Date(cellValue);

    // 获取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
    var day = ("0" + originalDate.getDate()).slice(-2);
    var hours = ("0" + originalDate.getHours()).slice(-2);
    var minutes = ("0" + originalDate.getMinutes()).slice(-2);
    var seconds = ("0" + originalDate.getSeconds()).slice(-2);

    // 格式化输出
    var formattedDateTimeString = year + "-" + month + "-" + day;
    return formattedDateTimeString;
}

listPerceptionTable();

</script>